<template>
    <div>
        <div class="bg-container">
            <div class="header" @mouseenter="enterNavEvent">
                <h1>
                    <a href="#"><img src="../assets/logo-king.png" /></a>
                </h1>
                <ul class="nav-list">
                    <li><a>游戏资料<em>DATA</em></a></li>
                    <li><a>内容中心<em>CONTENTS</em></a></li>
                    <li><a>赛事中心<em>MATCH</em></a></li>
                    <li><a>百态王者<em>CULTURE</em></a></li>
                    <li><a>社区互动<em>COMMUNITY</em></a></li>
                    <li><a>玩家支持<em>PLAYER</em></a></li>
                    <li><a>IP新游<em>NEWGAMES</em></a></li>
                </ul>
            </div>
            <!-- 给二级导航加一个v-show  鼠标移入一级导航  则二级导航显示 -->
            <div class="sub-nav" v-show="seen" @mouseleave="leaveSubNavEvent">
                <ul class="sub-nav-inner">
                    <li class="down-nav">
                        <a href="#">版本介绍</a>
                        <a href="#">游戏介绍</a>
                        <a href="#">英雄资料</a>
                        <a href="#"><i class="icon-hot"></i>爆料站</a>
                        <a href="#">世界观体验站</a>
                        <a href="#">游戏壁纸</a>
                    </li>
                    <li class="down-nav">
                        <a href="#">攻略中心</a>
                        <a href="#">英雄攻略</a>
                        <a href="#">视频中心</a>
                        <a href="#">开放素材库</a>
                        <a href="#">内容共创平台</a>
                    </li>
                    <li class="down-nav">
                        <a href="#">KPL</a>
                        <a href="#">挑战者杯</a>
                        <a href="#">全国大赛</a>
                        <a href="#">女子公开赛</a>
                        <a href="#">K甲联赛</a>
                        <a href="#">高校联赛</a>
                        <a href="#">全民赛</a>
                        <a href="#">赛事数据</a>
                    </li>
                    <li class="down-nav">
                        <a href="#">荣耀传承</a>
                        <a href="#">王者文化站</a>
                        <a href="#">万千世界</a>
                        <a href="#">星光殿堂</a>
                        <a href="#">IP共创计划</a>
                        <a href="#">商户特权</a>
                        <a href="#">龙翼王者卡</a>
                    </li>
                    <li class="down-nav">
                        <a href="#">创意互动营</a>
                        <a href="#">王者营地</a>
                        <a href="#">微信圈子</a>
                        <a href="#">官方微博</a>
                        <a href="#">微信公众号</a>
                        <a href="#">手Q订阅号</a>
                    </li>
                    <li class="down-nav">
                        <a href="#">腾讯游戏防沉迷</a>
                        <a href="#">成长守护平台</a>
                        <a href="#">对局环境情报站</a>
                        <a href="#">客服专区</a>
                        <a href="#">礼包兑换</a>
                        <a href="#">自助服务</a>
                    </li>
                    <li class="down-nav">
                        <a href="#">王者荣耀·世界</a>
                        <a href="#">代号:破晓</a>
                        <a href="#">代号:启程</a>
                    </li>
                </ul>
            </div>

            <div class="in-box">
                <div class="hero-box">
                    <p>周免英雄（日期）</p>
                    <ul class="hero-list" v-for="hero in weekFrom" :key="hero.ename">
                        <li>
                            <a href="#" @mouseenter="enter(hero.ename)" @click="HandleweekFromChange(hero.ename)">
                                <img class="small"
                                    :src="'https://game.gtimg.cn/images/yxzj/img201606/heroimg/' + hero.ename + '/' + hero.ename + '.jpg'">
                                <img v-if="curId == hero.ename" v-show="seen_large" class="large"
                                    :src="'https://game.gtimg.cn/images/yxzj/img201606/heroimg/' + hero.ename + '/' + hero.ename + '-freehover.png'">
                            </a>
                        </li>
                    </ul>
                    <a href="#" class="more-hero">更<br>多<br>英<br>雄</a>
                </div>
            </div>
        </div>
        <el-main>
            <h1 class="herolist_title">{{ titleStrings[curIndex] }}</h1>
            <el-card class="box-card" shadow="never">
                <div>
                    <ul class="herolist-nav">
                        <li v-for="(item, index) in childPath" :key="index">
                            <a :href="'#/mainlist/' + item" @click="changePage(item,index)"
                                :class="switchTitle[index] == true ? 'current' : ''">{{ navStrings[index] }}</a>
                        </li>
                    </ul>
                </div>
                <router-view />
            </el-card>
        </el-main>
    </div>
</template>


<script>

export default {
    data() {
        return {
            heroData: '',
            childPath: ['heroslist', 'equipslist', 'skillslist'],
            navStrings: ['英雄', '局内道具', '召唤师技能'],
            titleStrings: ['英雄介绍', '局内道具', '召唤师技能'],
            weekFrom: [],
            curPath: 'heroslist',
            curId: 0,
            curIndex: 0,
            seen: false,
            seen_large: false,
            switchTitle: [true, false, false]
        }
    },
    created() {
        this.query();
    },
    mounted() {
        console.log(this.curPath);
    },
    methods: {
        query() {
            fetch("http://47.241.102.141:3000/heros")
                .then((response) => response.json())
                .then((data) => {
                    this.heroData = data;
                    for (let i = 0; i < this.heroData.length; i++) {
                        if (this.heroData[i].pay_type == 10) {
                            this.weekFrom.push(this.heroData[i]);
                        }
                    }
                    console.log(this.weekFrom[0].ename);
                });
        },
        changePage(item, index) {
            this.curPath = item;
            this.curIndex = index;
            //数组置为空
            this.switchTitle = [];
            this.switchTitle.fill(false);
            this.switchTitle[index] = true;
            console.log(this.curPath);
        },
        //鼠标移入显示二级导航
        enterNavEvent() {
            this.seen = true;
        },
        //鼠标离开二级导航 则隐藏二级导航这块div
        leaveSubNavEvent() {
            this.seen = false;
        },
        enter(id) {
            this.curId = id;
            this.seen = false;
            this.seen_large = true;
        },
        HandleweekFromChange(heroId) {
            this.$router.push("/heroinfo/"+heroId);
        }
    },
}
</script>

<style>
.el-main {
    background-color: #E9EEF3;
    color: #333;
    height: 100%;
}

body>.el-container {
    margin-bottom: 40px;
    height: 100%;
}

.bg-container {
    min-width: 1280px;
    height: 618px;
    background: url(../assets/mainBg.jpg) no-repeat center top;
}

.header {
    min-width: 1300px;
    padding-left: 126px;
    background-color: rgba(0, 0, 0, 0.8);
    color: #333;
    height: 84px !important;
    line-height: 84px;
    display: flex;
    cursor: pointer;
}

.header h1 {
    width: 230px;
    height: 84px;
    line-height: 84px;
}

.header h1 img {
    width: 200px;
    height: 54px;
    padding: 14px 0;
}

a {
    text-decoration: none;
    color: #323235;
}

/*header 一级导航列表 */
.nav-list {
    width: 890px;
    padding-left: 30px;
}

.nav-list li {
    float: left;
    width: 115px;
    height: 84px;
    text-align: center;
}

.nav-list a {
    display: block;
    width: 110px;
    height: 64px;
    padding: 20px 0 0;
    color: #c9c9dd;
    font-size: 18px;
    line-height: 30px;
}

.nav-list li a:hover {
    color: #e4b653;
    background-color: rgba(229, 179, 72, 0.2);
}

.nav-list a:hover em {
    color: #e4b653;
    border-bottom: 3px solid rgb(243, 194, 88);
}

.nav-list em {
    display: block;
    padding-top: 5px;
    transform: scale(0.95);
    font-size: 12px;
    font-style: normal;
    line-height: 16px;
    color: #858792;
}

/*header 二级导航 */
.sub-nav {
    transition: all 1s ease-in-out;
    position: absolute;
    top: 83px;
    left: 0;
    padding-left: 92px;
    width: 100%;
    background: #000;
    background: rgba(0, 0, 0, 0.7);
    z-index: 3;
    overflow: hidden;
    box-sizing: border-box;
}

.sub-nav-inner {
    width: 890px;
    height: 240px;
    margin: 0 auto;
    overflow: hidden;
    zoom: 1;
    padding-top: 15px;
    padding-bottom: 30px;
    padding: 15px 0 30px 50px;
}

.down-nav {
    float: left;
    display: inline;
    width: 110px;
    padding: 2px 2.5px 0;
    text-align: center;
    white-space: nowrap;
    /* background-color: #3589DD; */
}

.down-nav a {
    height: 30px;
    line-height: 30px;
    display: block;
    padding: 0;
    font-size: 14px;
    color: #c9c9dd;
}

.down-nav a:hover {
    color: #e4b653;
    text-decoration: underline;
}

.in-box {
    position: relative;
    margin: 419px auto 0;
    width: 1200px;
    height: 115px;
    background: url(../assets/in-box.png) no-repeat;
}

.in-box .hero-box {
    width: 732px;
    height: 100px;
    padding: 8px 20px 0;
    position: relative;
    color: #a6afbc;
}

.hero-box .hero-list {
    margin-top: 8px;
}

.in-box .hero-list li {
    float: left;
    display: inline;
    position: relative;
    margin-right: 10px;
    width: 69px;
    transition: 0.4s ease-in-out;
    overflow: hidden;
}

.in-box .hero-list a {
    display: block;
    position: relative;
    width: 69px;
    height: 69px;
}

.in-box .hero-list img {
    border-radius: 5px;
    -webkit-transition: 0.4s ease-in-out;
    transition: 0.4s ease-in-out;
    position: absolute;
    left: 0;
    top: 0;
}

.in-box .hero-list li.active {
    width: 234px;
}

.hero-list li.active a {
    width: 234px;
}

.in-box .hero-list li.active .small {
    opacity: 0;
}

.in-box .hero-list li a img:nth-child(1) {
    width: 69px;
    height: 69px;
    border: 0;
    display: block;
}

.in-box .hero-list li a img:nth-child(2) {
    width: 234px;
    height: 69px;
    display: block;
}

.in-box .more-hero {
    top: 10px;
    position: absolute;
    right: 15px;
    line-height: 15px;
    padding: 30px 10px 10px;
    color: #626a7a;
}

/*英雄介绍*/
.herolist_title {
    width: 1182px;
    margin: 0 auto;
    margin-top: 50px;
    padding-left: 30px;
    font: bold 20px/22px '\5FAE\8F6F\96C5\9ED1';
    background: url(../assets/icon_hero.png) no-repeat;
}

.text {
    font-size: 14px;
}

.item {
    padding: 18px 0;
}

.box-card {
    width: 1182px;
    margin: 0 auto;
    margin-bottom: 50px;
    padding: 35px 28px;
    border: 2px solid #E8E8E8;
    border-top: 0;
    position: relative;
}

.herolist-nav {
    margin-top: 20px;
    height: 32px;
    font-size: 16px;
    border-bottom: 3px solid #D4D4D4;
    border-radius: 0 0 3px 3px;
}

.herolist-nav li {
    float: left;
    width: 33%;
    margin-bottom: -3px;
    position: relative;
}

.herolist-nav li .current {
    border-bottom: 3px solid #3589DD;
    border-radius: 0 0 3px 3px;
}

.herolist-nav li .current a {
    color: #3589DD;
    font-weight: bold;
}

.herolist-nav li a {
    display: block;
    width: 100%;
    line-height: 32px;
    text-align: center;
    color: #4B4B4B;
    cursor: pointer;
}
</style>